<template>
	<view class="page">
		<u-sticky :customNavHeight="statusBarHeight" bgColor="#fff">
			<view class="user-panel">
				<view class="amount">
					<view>
						<text class="fsize-24">￥</text>
						<text>{{staffData.canTocashBonus}}</text>
					</view>
					<view class="fsize-28">可结算提成</view>
				</view>
				
				<view class="achievementachievement">
					<view class="flex pt-40">
						<view class="utim flex align-center justify-center column w-25">
							<view class="value">
								<text class="fsize-20">￥</text>
								<text>{{staffData.saleBonus}}</text>
							</view>
							<text class="label">销售提成</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view class="value">
								<text class="fsize-20">￥</text>
								<text>{{staffData.serviceBonus}}</text>
							</view>
							<text class="label">服务提成</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view class="value">
								<text class="fsize-20">￥</text>
								<text>{{staffData.stockholderBonus}}</text>
							</view>
							<text class="label">联创提成</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view class="value">
								<text class="fsize-20">￥</text>
								<text>{{staffData.targetAmount}}</text>
							</view>
							<text class="label">业绩目标</text>
						</view>
					</view>
					<view class="flex pt-40 pb-40">
						<view class="utim flex align-center justify-center column w-25">
							<view>
								<text class="fsize-20">￥</text>
								<text>{{staffData.saleAmount}}</text>
							</view>
							<text class="label">销售业绩</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view>
								<text class="fsize-20">￥</text>
								<text>{{staffData.serviceAmount}}</text>
							</view>
							<text class="label">服务业绩</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view>
								<text class="fsize-20">￥</text>
								<text>{{staffData.stockholderAmount}}</text>
							</view>
							<text class="label">联创业绩</text>
						</view>
						<view class="utim flex align-center justify-center column w-25">
							<view>
								<text class="fsize-20">￥</text>
								<text>{{staffData.suggestAmount}}</text>
							</view>
							<text class="label">推荐业绩</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ugrid mt-20 pb-20">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(nItem,nIndex) in navList" :key="nIndex" @click="$u.route(nItem.router)">
						<uni-icons custom-prefix="iconfont" :type="nItem.icon" color="#e45d57" size="32" />
						<text class="grid-text">{{nItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 经营数据 -->
			<view class="flex justify-between align-center pb-20">
				<view>预约管理</view>
				<u-icon name="arrow-right" size="20" @click="$u.route('/pages/shop/Reservation/staffList')"/>
			</view>
		</u-sticky>
		<view class="my-list pl-0 pr-0">
			<u-list v-if="reservations.length > 0">
				<u-list-item v-for="(item, index) in reservations" :key="index">
					<view 
						class="flex mb-20 padding-20 bg-white-ling align-center border-radius-10" 
						@click="$u.route('/pages/shop/Reservation/detailed', {id: item.orderId})"
					>
						<view class="shrink0 mr-20">
							<u-avatar :src="item.projectImage || '/static/logo.png'" size="50"></u-avatar>
						</view>
						<view class="w-100">
							<view>{{item.orderId}}</view>
							<view class="fsize-26 line-gray mt-10">{{item.userName}} | {{item.date}}</view>
						</view>
						<view class="shrink0">
							<u-icon name="arrow-right" size="20" color="#aaa"></u-icon>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view class="emptybox" v-if="reservations.length === 0">
			<u-empty icon-size="100" text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			userInfo:{},
			staffData:{},
			reservations:{
				type: Array,
				default:[]
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navList: [{
						icon: 'icon-kaidan',
						title: '快速开单',
						router: '/pages/order/add/index'
					},
					{
						icon: 'icon-yuyue',
						title: '预约列表',
						router: '/pages/shop/Reservation/list'
					},
					{
						icon: 'icon-order',
						title: '订单列表',
						router: '/pages/order/index'
					},
					{
						icon: 'icon-xiangmu',
						title: '项目订单',
						router: '/pages/order/list/cardEntryList'
					},
				],
				data: {},
				dataList: [],
				loadmore: {
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				}
			}
		},
		created() {
			// this.getData()
			// this.getPageList()
			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf('iPhone') > -1) {
				this.statusBarHeight += 4
			}
		},
		methods: {
			// getData(){
			// 	this.$reqJsonPost('GetStaffDetails',{id: this.userInfo.userId}).then(res=>{
			// 		this.staffData = res.data;
			// 	})
			// },
			// getPageList(){
			// 	this.$reqPost('GetAppointmentList', {...this.searchData, staffId: this.userInfo.userId }).then(res=>{
			// 		this.dataList = res.data
			// 	})
			// }
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 0 20rpx;
		.ugrid {
			.ugrid-title {
				padding: 20rpx 20rpx 0 20rpx;
				font-size: 28rpx;
				font-weight: 600;
			}

			.grid-text {
				font-size: 26rpx;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
			}
		}

		.table-box {
			margin-top: 30rpx;
			padding: 40rpx 40rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			background: #fff;

			.grid-item {
				padding: 0rpx 0 20rpx;
				margin: 30rpx 0;
			}
		}
		.user-panel {
			padding: 20rpx;
			background: linear-gradient(to bottom right,#db345c,#ee5a6b);
			position: relative;
			min-height: 200rpx;
			border-radius: 30rpx;
			.amount{
				text-align: center;
				color: #fff;
				font-size: 38rpx;
			}
			.achievementachievement{
				margin:30rpx 10rpx 20rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 30rpx;
				.value{
					color: red;
				}
				.label{
					color:gray;
				}
			}
			.img {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.utim {
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}
	}
</style>